
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./cesium/Cesium1.98/Widgets/widgets.css" />
  <script type="text/javascript" src="./cesium/Cesium1.98/Cesium.js"></script>
  <link rel="stylesheet" href="./plottingfont/plottingfont.css" />
  <script src="./jquery-1.8.3.min.js"></script>
  <script src="./dom-to-image.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    #cesiumContainer {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
  <div class="dddddd" style="width: 72px;"><i class="plottingfont plottingfont-8"
      style="font-size: 72px;color: red;"></i></div>
  <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
  <script type="text/javascript">
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
    const viewer = new Cesium.Viewer("map", {});
    viewer.scene.debugShowFramesPerSecond = true;

    function base64ToBlob(base64) {
      var parts = base64.split(';base64,');
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    }
    domtoimage.toPng(document.getElementsByClassName("dddddd")[0]).then(res => {
      var blob = base64ToBlob(res);
      var url = URL.createObjectURL(blob);

      var hello = viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            -115.0,
            37.0,
            -115.0,
            36.0,
            -114.0,
            36.0,
            -114.0,
            37.0,
            -115.0,
            37.0,
          ]),
          material: new Cesium.ImageMaterialProperty({
            image: url,
          }),
        },
      });
    })

  </script>
</body>

</html>